<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<style type="text/css">
        a {
            /*干掉a标签的下划线*/
            text-decoration: none;
        }

        .topbar-nav {
            width: 100%;
            height: 40px;
            background-color: #333333;
        }

        .topbar-nav a {
            color: #b0b0b0;
            /*可以设置行高 转换为块元素*/
            background-color: green;
            display: inline-block;
            line-height: 40px;
        }

        .topbar-nav span {
            color: #424242;
        }

        .topbar-nav a :hover {
            color: #ffffff;
        }


	</style>
</head>
<body>
<!--头部信息-->
<div>
	<!--导航栏左边-->
	<div class="topbar-nav">
		<!--行内标签a 和 span 实现导航栏效果 通过display 属性-->
		<a class="logo" href="#">小米商城</a>
		<span class="sep">|</span>
		<a href="#" target="_blank">MIUI</a>
		<span class="sep">|</span>
		<a href="#" target="_blank">IoT</a>
		<span class="sep">|</span>
		<a href="#" target="_blank">云服务</a>
		<span class="sep">|</span>
		<a href="#" target="_blank">天星数科</a>
		<span class="sep">|</span>
		<a href="#" target="_blank">有品</a>
		<span class="sep">|</span>
		<a href="#" target="_blank">小爱开放平台</a>
		<span class="sep">|</span>
		<a href="#" target="_blank">企业团购</a>
		<span class="sep">|</span>
		<a href="#" target="_blank">资质证照</a>
		<span class="sep">|</span>
		<a href="#" target="_blank">协议规则</a>
		<span class="sep">|</span>
		<a href="#" target="_blank" id="J_siteDownloadApp" class="topbar-download">下载app</a>
		<span class="sep">|</span>
		<a href="#" target="_blank">智能生活</a>
		<span class="sep">|</span>
		<a href="javascript:;" class="J_siteGlobalRegion">Select Location</a>
	</div>
	<!--购物车-->
	<div id="J_miniCartTrigger" class="topbar-cart">
		<a rel="nofollow" id="J_miniCartBtn" href="#" class="cart-mini">
			<em class="iconfont-cart"></em>
			<em class="iconfont-cart-full hide"></em>
			购物车
			<span class="cart-mini-num J_cartNum">（0）</span>
		</a>
	</div>
	<!--我的消息 注册 登录-->
	<div id="J_siteUserInfo" class="topbar-info">
		<a href="#" class="link">登录</a>
		<span class="sep">|</span>
		<a href="#">注册</a>
		<span class="sep">|</span>
		<span class="message"> <a href="#" class="J_needAgreement">消息通知</a></span>
	</div>
</div>
<!--主打商品 和分类信息-->
<div>
	<!--主打信息-->
	<div>
		<!--分类信息-->
		<div></div>
		<!--主打商品轮巡播放-->
		<div></div>
		<!--剩下三种产品信息 和 六种其他信息-->
		<div></div>
	</div>
	<!--秒杀 各种分类商品的招牌商品列表-->
	<div>
		<!--秒杀信息-->
		<div></div>
		<!--分类商品-->
		<div>
			<!--手机-->
			<div></div>
			<!--家电-->
			<div></div>
			<!--智能-->
			<div></div>
			<!--搭配-->
			<div></div>
			<!--配件-->
			<div></div>
			<!--周边-->
			<div></div>
			<!--视频-->
			<div></div>
		</div>

	</div>


</div>
<!--网站信息 和 关于帮助中心等-->
<div></div>
<!--版权信息等信息-->
<div></div>


</body>
</html>